<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>8.CSS盒子模型</title>

    <style>

        .demo {
            background-color: aqua;
            display: inline-block;
            border: 5px solid #66ccff;
            padding: 50px ;
            margin: 40px; 
            
        }

        .border-demo {
            background-color: yellow;
            width: 300px;
            height: 200px;
            border-style: solid dashed;
            border-width: 10px 0 20px 40;
            border-color: violet;
        }
    </style>

</head>
<body>

    <img src="css-盒子.png" alt="" width="400">

    <hr>
    <div class="demo">demo类</div>

    <div class="border-demo">
        边框示例
        <button>111</button>
    </div>

    <nav>
        <button>1</button>
        <button>2</button>

        <code >

        </code>
    </nav>
    
</body>
</html>